<template>
  <div ref="customerDialogDefaultRef" :id="autoKey">
    <div class="customer-dialog-wrap">
      <div class="bg-mask" @click="handleClose"></div>
      <div class="base-wrap">
        <slot name="default"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/// 自定义无边框dialog
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'customerDialog',
  setup(props, {emit}) {
    const customerDialogDefaultRef = ref();
    const autoKey = ref("984958347");
    const openDialog = () => {
      autoKey.value = new Date().getTime() + (Math.random() * 1000).toFixed(0);
      const targetDiv = document.getElementById('app');
      const divToMove = customerDialogDefaultRef.value;
      targetDiv.parentNode.insertBefore(divToMove, targetDiv.nextSibling);
    };
    const handleClose = () => {
      const elementToRemove = document.getElementById(autoKey.value);
      if (elementToRemove) {
        elementToRemove.remove();
      }
    }
    return {
      customerDialogDefaultRef,
      autoKey,
      openDialog,
      handleClose,
    };
  },
});
</script>

<style scoped lang="scss">
.customer-dialog-wrap {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;

  .bg-mask {
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
    background-color: #1c2518;
    position: absolute;
    z-index: 555;
  }

  .base-wrap {
    position: absolute;
    z-index: 888;
    width: 100%;
  }
}
</style>
